<template>
    <div class="nav_bglayer">
        <div class="nav_container com_width">
            <img class="nav_logo" src="../assets/logo.png" alt="">
            <ul class="main_nav">
                <li>首页</li>
                <li>作品展示</li>
                <li>生活分享</li>
                <li>留言评论</li>
                <li>在线交易</li>
                <li @click="userZoom">游客登录</li>
            </ul>
        </div>
        <p class="global_notice">{{notice}}</p>
        <login-component></login-component>
    </div>
</template>
<style scoped>
.nav_bglayer{
    background-color: var(--theme_color);
    position: fixed;
    top: 0px;
    z-index: 10;
    width: 100%;
}
.nav_container{
    display: flex;
    justify-content: space-between;
}
.nav_logo{
    widows: 50px;
    height: 50px;
}
.main_nav{
    display: flex;
    height: 50px;
}
.main_nav>li{
    height: 100%;
    padding: 0 20px;
    cursor: pointer;
    line-height: 50px;
    color: var(--theme_vary_color);
}
.global_notice{
    width: 100%;
    height: 50px;
    background-color: yellow;
    color: red;
    text-align: center;
    line-height: 50px;
    font-size: 20px;
}
</style>
<script>
import LoginComponent from './LoginComponent.vue'
export default {
    name:'Navigation',
    components:{
        LoginComponent
    },
    data(){
        return{
            notice:'通知'
        }
    },
    mounted(){
        fetch('/notice/index/2',{method:'GET'}).then(res=>{
            res.json().then(data=>{
                console.log(data)
                this.notice=data.noticeContent
            })
        }).catch(err=>{
            console.log(err)
        })
    },
    methods:{
        userZoom(){
            console.log('结果：'+LoginComponent.data.loginContainerState)
        }
    }
}
</script>
